<!--评价标准-->
<template>
  <div>
    <el-dialog title="评价标准" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%">
      <div class="container">
          <div class="my-form-container" style="width:100%" :style="{height:totalHeight+'px'}">
            <el-row class="my-form-item" :style="{'height':lineHeight+'px'}">
              <el-col :span="24">
                <div class="my-form-item-label">评价标准</div>
                <div class="my-form-item-value" style="padding-left:0">
                  <el-row class="header">
                    <el-col :span="12">评价项目</el-col>
                    <el-col :span="3" v-for="i in grade" :key="i.label">{{i.label}}</el-col>
                  </el-row>
                  <el-row v-for="(i,k) in tableData" :key="k" class="row-css" :class="{'bottomColor':k == tableData.length-1}">
                    <el-col :span="12" class="row-css-right">{{i.pjEvalguide.guidename}}</el-col>
                    <el-col v-for="m in grade" :key="m.label" :span="3" class="row-css-right">
                      <el-checkbox  v-model="i[m.label+'allInfo']"></el-checkbox></el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <el-row class="my-form-item" style="border-bottom: 1px solid rgba(0, 76, 167, 0.39)!important">
              <el-col :span="12">
                <div class="my-form-item-label">评价等级</div>
                <div class="my-form-item-value">
                  <el-select v-model="dataForm.gradeClass" placeholder="请选择" class="width110 select-css" size="mini">
                    <el-option v-for="item in grade" :key="item.label" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="my-form-item-label">评定分数</div>
                <div class="my-form-item-value"><el-input class="width110" v-model="dataForm.pdfs"></el-input></div>
              </el-col>
            </el-row>
            <el-row class="my-form-item lastOne">
              <el-col :span="24">
                <div class="my-form-item-label">专家评语</div>
                <div class="my-form-item-value flex assessment-design">
                  <el-input type="textarea" :rows="3" class="width850" v-model="dataForm.zjpy"></el-input>
                  <el-upload action="string" :show-file-list="false" :http-request="upLoadApi" accept=".doc,.docx"
                                        :before-upload="beforeAvatarUpload">
                    <span class="small-btn color-purple">选择文件</span>
                  </el-upload>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="button-group" slot="footer">
          <div class="" @click="save">保存</div>
          <div class="" @click="dialogVisible=false">取消</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {bzList} from "@/api/lineData";
  import axios from 'axios'

export default {
  data() {
    return {
      dialogVisible:false, 
      dataForm: {
        gradeClass:'',//评价等级
        pdfs:'',//评定分数
        zjpy:'',//专家评语
        fileUrl:'',
        checkedList:[]
      } ,
      grade:[
        {label:'A',value:'A'},
        {label:'B',value:'B'},
        {label:'C',value:'C'},
        {label:'D',value:'D'},
      ],
      checkList:[],
      lineHeight:60,
      totalHeight:552,
      tableData:[]
    };
  },
  mounted(){
    this.initList()
  },
  methods: {
    //初始化表格
    async initList(){
      let res = await bzList();
      if(res.code == 200){
        this.tableData = res.data.map(item=>{
          let nes = {
            ...item,
            AallInfo:false,
            BallInfo:false,
            CallInfo:false,
            DallInfo:false,
          }
          return nes
        });
        this.lineHeight = 60*(res.data.length+1);
        this.totalHeight = 164+60*(res.data.length+1);
        console.log(res.data)
      }
    },
    choseOption(e){
      console.log(e)
    },
    upLoadApi(item){
      let formData = new FormData();
      formData.append('file', item.file);
      let requestUrl = this.$store.state.studentUrl.baseUrl+'/file/upload'
      axios.post(requestUrl,formData).then(res => {
        if(res.data.success){
            this.ruleForm.fileUrl = res.data.data.fileUri
        }
      })
    },
    beforeAvatarUpload(item){
      if(item.name.indexOf("doc") == -1 && item.name.indexOf("docx") == -1){
        this.$message.error('请上传word');
      }
    },
    save(){
      let checkValue = [];
      for(let i = 0;i<this.tableData.length;i++){
        for(let m = 0;m<this.grade.length;m++){
          if(this.tableData[i][this.grade[m].label+'allInfo']){
            checkValue.push({
              ...this.tableData[i].pjEvalguide,
              checkedValue:this.grade[m].label
            })
          }
        }
      }
      this.dataForm.checkedList = checkValue;
      this.dialogVisible = false;
      this.$emit('savePJBZ',this.dataForm)
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
/deep/.button-group{
  padding-bottom: 48px;
  margin-top: 0;
}
.width850{width: 60%;margin-right: 18px;}
.lastOne{
    border:none;height:100px;
    /deep/.el-form-item__error {
        top:96%;
    }
  }
  .flex{
    display: flex;
    align-items: center;
  }
  .assessment-design {
    .el-textarea__inner {
      resize: none;
      font-size: 16px;
      color: rgba(0, 76, 167, 1);
    }
  }
 /deep/ .small-btn{
    line-height:16px ;
    width: 90px;
  }
  .width110{width:110px}
  .select-css{
    /deep/.el-input__inner{
      border: 1px solid #02C86C!important;
      color: #02C86C;
      background: #F1FFF8;
    }
    /deep/.el-select__caret{
      color: #02C86C;
    }
    input::input-placeholder{color:  red;} 
    ::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #02C86C; 
    } 
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #02C86C; 
    } 
    ::-moz-placeholder { /* Mozilla Firefox 19  */ 
    color: #02C86C; 
    } 
    :-ms-input-placeholder { /* Internet Explorer 10  */ 
    color: #02C86C; 
    }
  }
  /deep/.el-select-dropdown__item {
        color: #02C86C!important;
    }
    .header{
      div{
        background: rgba(0, 76, 167, 0.1);
        text-align: center;
        height: 60px;
        line-height: 60px;
        font-weight: bold;
        border-right:1px solid rgba(0, 76, 167, 0.39);
        &:last-child{border-right: none;}
      }
    }
    .row-css{
      border-top: 1px solid rgba(0, 76, 167, 0.39);
      height: 60px;
      .row-css-right{
        border-right: 1px solid rgba(0, 76, 167, 0.39);
        height: 60px;
        &:last-child{border-right: none;}
        /deep/.el-checkbox__label{display: none;}
      }
      text-align: center;
    }
    .bottomColor{
      border-bottom: 1px solid rgba(0, 76, 167, 0.39) ;
    }
</style>
